<template>
	<div class="details-reommend-combanation mt16">
		<h4 class="title">推荐组合套餐</h4>

		<div class="reommend-combanation-content h_box">
			<div class="reommend-combanation-left h_box">

				<ul class="h_box" v-for="item in combonation">
					<li class="h_box flex_1">
						<div class="list-des">
							<img src="../../assets/images/g.png" alt="">
							<p>{{item.skuName}}</p>
						</div>
						<div  v-show="condition" class="combanation-plus"><img src="../../assets/images/plus.png"> </div>
					</li>
				</ul>

			</div>
			<div class="reommend-combanation-right h_box flex_pjustify">
				<div>
					<strong>套餐价</strong>
					<div class="price">￥ <span>212398.</span>00</div>
					<span class="combanation-right">省 ￥421.00</span>
				</div>
				<div class="arrow"> > </div>
			</div>
		</div>

	</div>
	
</template>

<script>
	
export default {
	data: function () {
		return {
			condition:[],
			combonation:[]
		}
	},
	events: {
		recommendCombonationDataEvent: function ( data ) {
			this.combonation = data;
			for(var i=0,len=this.combonation.length;i<len;i++){
				this.condition[i]=this.combonation
			}
		}	
	}
}

</script>

<style lang="scss" scoped>

@import '../../assets/css/_functions.scss';
@import '../../assets/css/_variables.scss';
	
	.details-reommend-combanation {
		background-color: $_fff;
		.title{
			padding-left: rem(15);
			border-bottom: 1px solid #c8c7cc;
	       	padding-top: rem(12);
	        	padding-bottom: rem(15);
			font-size: rem(14);
		}
		.reommend-combanation-content {
			padding: rem(12) rem(14);
			li {
				min-width: rem(80);
			}
			.list-des {
				width: rem(58);
				font-size: rem(12);
				text-align: center;
				p {
					margin-top: rem(4);
				}
			}
			.combanation-plus {
				line-height: rem(82);
				margin-left: rem(4);
			}
		}
		.reommend-combanation-left {
			min-width: rem(230);
		}
		.reommend-combanation-right {
			div {
				strong {
					display: inline-block;
					margin-top: rem(14);
					font-size: rem(14);
					color: $_333;
				}
				.price {
					color: $_fe3824;
					font-size: rem(12);
					line-height: rem(28);
					span {
						font-size: rem(14);
					}
				}
				.combanation-right {
					color: $_999;
				}
			}
			.arrow {
				line-height: rem(86);
			}
		}
	}

</style>